﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>加载OGC的WMTS图层</title>
        <script src="./static/libs/include-leaflet-local.js"></script>
        <script type="text/javascript">
            /**显示地图
             */
            function init() {
                'use strict';
                //地图容器
                var map = L.map('leaf_map', {
                    //参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
                    crs: L.CRS.EPSG4326,
                    //显示中心
                    center: [40.2, 116.39],
                    //最小显示等级
                    minZoom: 1,
                    //最大显示等级
                    maxZoom: 15,
                    //当前显示等级
                    zoom: 8
                });

                var { protocol, ip, port } = window.webclient;
                // 天地图
                var layer1 = new Zondy.Map.TDTLayer({
                    //图层类型
                    layerType: 'img',
                    //最小显示等级
                    minZoom: 0,
                    //最大显示等级
                    maxZoom: 15,
                    //key
                    token: '4c27d6e0e8a90715b23a989d42272fd8',
                    //设置地图不连续显示
                    noWrap: true
                }).addTo(map);

                //wmts服务
                var layer3 = new Zondy.Map.MapWMTSLayer({
                    //IGServer所在ip地址
                    ip: `${ip}`,
                    //IGServer请求端口号
                    port: `${port}`,
                    tilematrixSet: 'EPSG:4326_北京市_arcgis_GB',
                    //wmts服务名称
                    layer: 'beijing'
                }).addTo(map);

                L.circle([40.2, 116.39], {
                    radius: 10,
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 1
                }).addTo(map);
            }
        </script>
    </head>

    <body onload="init()">
        <div id="leaf_map" style="width: 100%; height: 700px"></div>
    </body>
</html>
